<template>
	<view class="page">
		<view class="b-bg-white b-text-black-d">
			<!-- tabs -->
			<view class="b-tabs">
				<scroll-view scroll-x="true" style="width: 750rpx;">
					<view class="b-tabs-container">
						<view class="b-tabs-item" v-for="(item,index) in tabs1" :key="index"
							:class="{'b-tabs-active':tabs1Current == index}" @click="tabsCurrent(index)">
							{{item}}
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- tabs-item -->
			<view class="tabs" v-show="isLoadDowning == 0" v-for="(item,index) in rows" :key="index">
				<view v-if="tabs1Current==0">
					<view class="h1">
						<view class="h">
							{{item.contractName}} - {{item.payBatch}}
						</view>
						<view class="mon">
							{{item.payPrice}}<text style="font-weight: normal;margin-left: 2rpx;">元</text>
						</view>
					</view>
					<view class="detail">
						<view class="checked" @tap.stop="checked(item,index)" v-if="payState==1">
							<image class="icon" v-if="item.checked==false"></image>
							<image class="icon" v-else src="../../static/benefits.png"></image>
						</view>
						<view class="yb" v-else>
						</view>
						<view style="padding: 20rpx 0;width: 420rpx;">
							<view class="p">
								订单编号：{{item.contractId}}
							</view>
							<view class="p">
								订单类型：{{item.payBreed==1?'租金费':item.payBreed==2?'水电燃气费':item.payBreed==3?'公共设施费':item.payBreed==4?'押金费':'暂无数据'}}
							</view>
							<view class="p" v-if="item.payTime">
								缴费日期：{{item.payTime}}
							</view>
							<view class="p" v-else>
								缴费日期：待缴费
							</view>
							<view class="p">
								创建日期：{{item.createTime}}
							</view>
						</view>
						<view class="img">
							<image :class="type==2?'img-1':'img-2'" style="" :src="item.showImgUrl" mode="scaleToFill">
							</image>
						</view>
					</view>
				</view>

				<view v-else>
					<view class="h1">
						<view class="h">
							{{item.contractName}} - {{item.payBatch}}
						</view>
						<view class="mon">
							{{item.realPrice}}<text style="font-weight: normal;margin-left: 2rpx;">元</text>
						</view>
					</view>
					<view class="detail">
						<view class="checked" style="width: 35.5rpx;height: 180rpx;line-height: 180rpx;">
							<!-- <image class="icon" v-if="item.checked==false"></image>
							<image class="icon" v-else src="../../static/benefits.png"></image> -->
						</view>
						<view style="padding: 20rpx 0;width: 420rpx;">
							<view class="p">
								订单编号：{{item.contractId}}
							</view>
							<view class="p">
								订单类型：{{item.payBreed==1?'租金费':item.payBreed==2?'水电燃气费':item.payBreed==3?'公共设施费':item.payBreed==4?'押金费':'暂无数据'}}
							</view>
							<view class="p">
								缴费日期：{{item.payTime}}
							</view>
							<view class="p">
								创建日期：{{item.createTime}}
							</view>
						</view>
						<view class="img">
							<image style="width: 150rpx;height: 150rpx;padding: 12rpx 0 0 0;margin-left: 60rpx;"
								:src="item.showImgUrl" mode="scaleToFill"></image>
						</view>
					</view>

				</view>

			</view>
			<div class="load" v-show="isLoadDowning == 1">
				<image class="loadImg" lazy-load="true" src="https://gateway.yijushenyang.com/static/img/loading.png"
					alt=""></image>
				<span>加载中</span>
			</div>
			<div class="load" v-show="isLoadDowning == 2">
				<span>没有更多了～</span>
			</div>
		</view>

		<view style="width: 100%;height: 200rpx;">
		</view>
		<view v-if="payState==1">
			<view class="fixed" v-if="tabs1Current==0">
				<view style="width: 30%;height: 100%;line-height: 100%;">
					<!-- <view class="checked" @tap.stop="all(index)" style="margin-top: 45rpx;position: relative;">
						<image class="icon all-icon" v-if="allChecked==false"></image>
						<image class="icon all-icon" v-else src="../../static/benefits.png">
						</image>
						<text class="all-text" style="font-size: 32rpx;font-weight: bold;">全选</text>
					</view> -->
				</view>
				<button v-if="type==2" id="submit" @tap.stop="order">去支付</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		throttle
	} from "@/utils/throttle.js"

	export default {
		data() {
			return {
				menuLists: [],
				tabs1: ["待支付", "已支付", "作废"],
				tabs1Current: 0,
				check: false,
				payState: 1,
				realPrice: '',
				allChecked: false,
				pageNum: 1,
				pageSize: 10,
				isLoadDowning: 0,
				loadBottom: true,
				list: [],
				rows: [],
				allcheck: false,
				parem: '',
				// parem: [],
				contractId: '',
				invoiceType: '',
				contractForm: '',
				type: '',
			}
		},
		onLoad(option) {
			if (option.invoiceIs == 4) {
				this.invoiceIs = 4
			}
			this.contractId = option.contractId
			this.contractForm = option.contractForm
			this.type = option.type
		},

		onShow() {
			this.init()
		},

		onReachBottom() {
			if (this.loadBottom) {
				this.pageNum += 1;
				if (this.pageNum <= Math.ceil(this.list.total / this.pageSize)) {
					this.isLoadDowning = 1
					this.init()
				}
			}
		},

		methods: {
			getSubmit() {
				// let parem = this.parem.join(',')
				let data = {
					payIdList: parem,
					invoiceType: this.invoiceType
				}
				this.api.post('hetong/pay/app/invoicing', data).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 1500,
						});
						this.tabs1Current = 1
						this.tabsCurrent()
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 1500,
						});
					}
				})
			},

			order() {
				for (let l = 0; l < this.rows.length; l++) {
					if (this.rows[l].checked == true) {
						this.parem = this.rows[l].payId
						this.realPrice = this.rows[l].payPrice
						break
					} else {
						this.parem = ''
						this.realPrice = ''
					}
				}
				let data = {
					payId: this.parem,
					realPrice: this.realPrice
				}

				console.log(this.parem);
				if (this.parem) {
					this.api.post('hetong/contract/app/submitPayPrice', data).then(res => {
						if (res.data.code == 200) {
							uni.showToast({
								title: '支付成功',
								icon: 'none',
								duration: 1500
							});
							this.tabs1Current = 1
							this.payState = 2
							this.rows = []
							this.pageNum = 1
							this.init()
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 1500
							});
						}
					})
				} else {
					uni.showToast({
						title: '请选择需支付的订单',
						icon: 'none',
						duration: 1500
					});
				}

			},

			checked(item, index) {
				for (let l = 0; l < this.rows.length; l++) {
					if (index == l) {
						this.$set(this.rows[l], 'checked', !item.checked)
						continue
					} else {
						this.$set(this.rows[l], 'checked', false)
					}
				}
			},

			init() {
				let old = this.rows
				let data = ''
				if (this.tabs1Current == 0) {
					data = {
						contractId: this.contractId,
						payState: this.payState,
						codeIs: 1,
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						payBreed: 4,
					}
				} else if (this.tabs1Current == 1) {
					data = {
						contractId: this.contractId,
						payState: this.payState,
						codeIs: '',
						payBreed: '',
						pageNum: this.pageNum,
						pageSize: this.pageSize,
					}
				} else {
					data = {
						contractId: this.contractId,
						payState: this.payState,
						codeIs: '',
						pageNum: this.pageNum,
						pageSize: this.pageSize,
					}
				}

				if (uni.getStorageSync("openId")) {
					this.api.get('hetong/contract/app/selContractPayInvo', data).then(res => {
						if (res.data.code == 200) {
							this.list = res.data
							let news = res.data.rows
							if (this.pageNum == 1 && res.data.total == 0) {
								this.isLoadDowning = 2
								this.loadBottom = false
							} else if (this.pageNum == 1 && res.data.total != 0) {
								this.rows = res.data.rows
								for (let l = 0; l < this.rows.length; l++) {
									this.$set(this.rows[l], 'checked', false)
								}
								this.isLoadDowning = 0
								this.loadBottom = false

							} else if (this.pageNum >= 2 &&
								this.pageNum <= Math.ceil(this.list.total / this.pageSize)) {
								if (this.allChecked == true) {
									for (let l = 0; l < news.length; l++) {
										this.$set(news[l], 'checked', true)
										this.parem.push(news[l].payId)
									}
								} else {
									for (let l = 0; l < news.length; l++) {
										this.$set(news[l], 'checked', false)
									}
								}
								this.rows = old.concat(news)
								this.isLoadDowning = 0
							}
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 1500,
							});
						}
					})
				} else {
					this.loginTip()
				}
			},

			loginTip() {
				uni.showToast({
					title: '请登陆',
					icon: 'none',
					duration: 2000
				});
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}, 2000);
			},

			tabsCurrent(e) {
				this.parem = ''
				this.tabs1Current = e
				if (e == 2) {
					this.payState = e + 2
				} else {
					this.payState = e + 1
				}
				this.init()
			},
		}
	}
</script>

<style lang="scss">
	.page {
		// background-color: #f5f5f5;
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #f9f9f9;
	}

	.img-1 {
		width: 150rpx;
		height: 150rpx;
		padding: 12rpx 0 0 0;
		margin-left: 20rpx;
	}

	.img-2 {
		width: 120rpx;
		height: 130rpx;
		padding: 24rpx 0 0 0;
		margin-left: 80rpx;
	}

	.b-tabs {
		width: 750rpx;
	}

	.b-tabs-container {
		display: flex;
		padding: 20rpx 0 0;
		background-color: white;
	}

	.b-tabs-item {
		padding: 0 0 14rpx;
		width: 100rpx;
		margin: 0 25rpx;
		text-align: center;
	}

	.b-tabs-active {
		color: #ff7100;
		font-weight: bold;
		border-bottom: 6rpx solid #ff7100;
		border-radius: 2rpx;
	}

	.tabs {
		margin: 20rpx auto 0;
		width: 720rpx;
		// height: 300rpx;
		border-radius: 15rpx;
		background-color: #fff;
		filter: drop-shadow(4rpx 4rpx 6rpx gray); // 设置图片的阴影
		// display: flex;

		.h1 {
			width: 90%;
			margin: 0 auto;
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			font-weight: bold;
			border-bottom: 2rpx solid #f2f4fa;
		}

		.detail {
			width: 100%;
			height: 180rpx;
			margin: 0 auto;
			// padding: 15rpx 30rpx;
			font-size: 26rpx;
			display: flex;

		}

		.checked {
			width: 87.5rpx;
			height: 180rpx;
			line-height: 180rpx;
			// background-color: #ff7100;
		}

		.yb {
			width: 35.5rpx;
			height: 180rpx;
			line-height: 180rpx;
			// background-color: #ff7100;
		}



		.p {
			font-size: 24rpx;
			width: 400rpx;
			margin-bottom: 2rpx;
		}
	}


	.load {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		padding: 10px;
		margin-top: 100rpx;
	}

	.loadImg {
		margin-right: 10px;
		width: 20px;
		height: 20px;
		animation: animation 3s linear infinite;
	}

	.load span {
		color: #999;
		font-size: 14px;
	}

	.fixed {
		width: 100%;
		height: 10vh;
		background-color: #f9ffff;
		position: fixed;
		bottom: 0;
		display: flex;
	}

	.icon {
		width: 30rpx;
		height: 30rpx;
		border-radius: 45rpx;
		border: 1rpx solid #ff7100;
		margin-left: 28.75rpx;
	}

	.all-icon {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		top: 8rpx;
		left: 15rpx;
	}

	.all-text {
		position: absolute;
		top: 8rpx;
		left: 100rpx;
		font-size: 34rpx;
	}

	#submit {
		border-radius: 100rpx;
		background: #fd7700;
		text-align: center;
		height: 7vh;
		line-height: 7vh;
		width: 55%;
		color: #f3f3f3;
		margin: 1.5vh 0 1.5vh 10%;
		font-size: 30rpx;
	}
</style>